import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { getLabel} from '../../../util/common';
import { Flex } from 'weaver-mobile';
import { RouteLayout,AtSomeone } from 'weaver-mobile-page';
import { _ } from '../../../util/pcPublic';
import RemintType from './RemindType';
import WfChooseItem from '../../../public/wf-choose-item/index';

@inject('wfRemindStore')
@withRouter
@observer
export default class ConfirmReminder extends React.Component{
    componentDidMount(){
        const { wfRemindStore,location } = this.props;
        wfRemindStore.loadRemindData(location);
    }
    render(){
        const { wfRemindStore } = this.props;
        const { operators,reminderStore,checkedReminder } = wfRemindStore;
        const template = {
            default: {
                theme: 'col2_row2',
                dataKeys: ['data', 'jobtitlename', 'subcompanyname', 'departmentname'],
            },
        };
        return (
            <div className="wf-confirm-reminder">
                <RemintType className="wf-confirm-remind-type" viewOnly={true} />
                <div className="wf-remind-split-line" />
                <Flex className="wf-remind-operators" justify="end">
                    <Flex.Item style={{flex:4}}>{getLabel(388220, "提醒接收人")}</Flex.Item>
                    <Flex.Item style={{flex:6}}>
                        <WfChooseItem
                            realValue={checkedReminder}
                            showValue={this.getShowName()}
                            viewAttr={2}
                            onClick={() =>{
                                this.props.history.push(reminderStore.path)
                            }}
                        />
                        <AtSomeone
                            value={checkedReminder}
                            datas={operators}
                            template={template}
                            imgSrcDataKey={'icon'}
                            store={reminderStore}
                            onOk={datas => {
                                wfRemindStore.changeReminder(datas);
                            }}
                        />
                    </Flex.Item>
                </Flex>
                <div className="wf-remind-split-line" />
                {this.getBtns()}
            </div>
        )
    }
    getShowName(){
        const { operators,checkedReminder } = this.props.wfRemindStore;
        const reminderArr = checkedReminder.split(",");
        let showName = [];
        operators && operators.map(item =>{
            if(_.indexOf(reminderArr, item.id) > -1){
                showName.push(<span key={`showitem_${item.id}`} className="wf-field-show-item">{item.data}</span>);
            }
        });
        return showName;
    }
    getBtns(){
        const { wfRemindStore } = this.props;
        const btns = [{
            key:"confirm",
            text: getLabel(83446,'确定'),
            type:"primary",
            onClick: () =>{
				 this.props.history.go(-1);
                wfRemindStore.triggerRemind();
            }
        }];
        return <RouteLayout.ButtonGroup data={btns} />;
    }
}